<html>

<body style="text-align: center">
    <div>
        <div id="testCanvas" style="background-color: #000000; width: 500px; height: 500px; margin: auto"></div>
        <!-- <canvas id="testCanvas" width="500" height="500" style="background-color: #000000; "></canvas> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/howler@2.0.15/dist/howler.core.min.js"></script>
    <!--[if lt IE 10]> 
        <script src="../build/svga.ie.min.js"></script>
    <![endif]-->
    <!--[if gte IE 10]><!-->
    <script src="http://s1.yy.com/ued_web_static/lib/jszip/3.1.4/??jszip.min.js,jszip-utils.min.js"
        charset="utf-8"></script>
    <script src="../build/svga.min.js"></script>
    <!--<![endif]-->
    <script>
        var parser = new SVGA.Parser('#testCanvas')
        var player = new SVGA.Player('#testCanvas')
        parser.load("./samples/matte.svga", function (videoItem) {
            // player.setImage('./samples/avatar.png', '99')
            player.setVideoItem(videoItem);
            player.startAnimation();

            // player.startAnimationWithRange({location: 20, length: 1}, false); 
        }, function (error) {
            alert(error.message);
        })
    </script>
</body>

</html>